// 可以写闭包，也可以不写，因为只有这一个界面

// 解决CLICK的300s的延迟
FastClick.attach(document.body);

let myAudio = document.querySelector('#myAudio'),
    // 获得头部元素
    musicBtn = document.querySelector('.music-btn'),
    titleBox = document.querySelector('.base-info .title'),
    authorBox = document.querySelector('.base-info .author'),
    // 获得歌词部分元素
    wrapperBox = document.querySelector('.wrapper'),
    lyricList = [],
    // 获得尾部部分元素
    alreadyBox = document.querySelector('.already'),
    durationBox = document.querySelector('.duration'),
    rateBox = document.querySelector('.rate');

// 处理播放时间和进度
const format = function format(num) {
    let minutes = Math.floor(num / 60),
        seconds = Math.ceil(num - minutes * 60);
    if (minutes < 10) minutes = '0' + minutes;
    if (seconds < 10) seconds = '0' + seconds;
    return `${minutes}:${seconds}`;
};
// 两个都不是有效数字
const handleTimeAndRate = function () {
    let { currentTime, duration } = myAudio;
    if (isNaN(currentTime) || isNaN(duration)) return;

    if (currentTime >= duration) {
        currentTime = 0;
    }
    alreadyBox.innerHTML = format(currentTime);
    durationBox.innerHTML = format(duration);
    rateBox.style.width = `${currentTime / duration * 100}%`;

};
// 等待绑定事件加载完毕，基础信息，绑定总时间
myAudio.onloadedmetadata = handleTimeAndRate;
$sub.on('music', handleTimeAndRate);


// 获取歌词绑定数据
const render = function render(lyric) {
    // 解析出标题和作者
    // console.log(lyric.match(/\[ti&#58;(.+)\]/));
    let title = lyric.match(/\[ti&#58;([^\]]+)\]/),
        author = lyric.match(/\[ar&#58;([^\]]+)\]/);
    if (title) titleBox.innerHTML = title[1];
    if (author) authorBox.innerHTML = author[1];

    // 解析歌词
    // 解析歌词
    let arr = [];
    lyric = lyric.replace(/(\d+);/g, (val, num) => {
        let text = '';
        return text;
    });
    console.log(lyric);
    lyric.split('\n');
    lyric.replace(/\[(\d+):(\d+).(?:\d+)\]([^/\n]+)/g, (_, minutes, seconds, text) => {
        arr.push({
            minutes,
            seconds,
            text
        })
    });

    // 歌词绑定
    let str = ``;
    arr.forEach(item => {
        let { minutes, seconds, text } = item;//分钟 秒
        str += `<p minutes="${minutes}" seconds="${seconds}">
            ${text}
        </p>`;
    })
    wrapperBox.innerHTML = str;
    // 其他操作
    musicBtn.style.display = 'block';
    lyricList = Array.from(wrapperBox.querySelectorAll('p'));
};
const queryData = function queryData() {
    return new Promise(resolve => {
        let xhr = new XMLHttpRequest;
        xhr.open('GET', './json/lyric.json');
        xhr.onreadystatechange = () => {
            if (xhr.readyState === 4 && xhr.status === 200) {
                let data = JSON.parse(xhr.responseText);
                resolve(data);
            }
        };
        xhr.send();
    });
};

// 获取所有数据
queryData().then(value => {
    return value.lyric;
})
    // 获取歌词数据
    .then(lyric => {
        render(lyric);
    });

/* 控制歌词的对应 */
// 用来记录歌词在播放后走了几行
let n = 0;
$sub.on('music', function () {
    let { currentTime, duration } = myAudio,
        // 获取当前已经有播放时间的分钟和秒
        // format(currentTime) -》获得一个字符串"minutes:seconds"
        [minutes, seconds] = format(currentTime).split(':'),
        // 歌词播放时向上挪动的高度
        H = lyricList[0].offsetHeight;
    // 从所有歌词中筛选出：和播放时间匹配的歌词合集 & 存放匹配到的歌词
    console.log(format(currentTime));
    let matchArr = [],
        // 存放不匹配的歌词
        matchNoneArr = [];
    lyricList.forEach(item => {
        let a = item.getAttribute('minutes'),
            b = item.getAttribute('seconds');
        if (a == minutes && b === seconds) {
            matchArr.push(item);
            return;
        }
        matchNoneArr.push(item);
    });
    // console.log(lyricList);
    // 一经发现匹配在处理
    if (matchArr.length > 0) {
        matchArr.forEach(item => item.classList.add('active'));
        matchNoneArr.forEach(item => item.classList.remove('active'));
        // 匹配的同时，不要忘记: wrapper的挪动
        n += matchArr.length;
        if (n > 4) {
            wrapperBox.style.transform = `translateY(${-(n - 4) * H}px)`;
        }
    }
    // 播放完毕的处理
    if (currentTime >= duration) {
        myAudio.pause();
        musicBtn.classList.remove('move');
        wrapperBox.style.transform = `translateY(0)`;
        lyricList.forEach(item => item.classList.remove('active'));
        n = 0;
        if (timer) {
            clearInterval(timer);
            timer = null;
        }
    }
});

/* 音乐的暂停和播放 */
let timer = null;
musicBtn.onclick = function () {
    if (myAudio.paused) {
        // 当前是暂停的，让其播放
        myAudio.play();
        // 添加move开始动（move事件池）
        musicBtn.classList.add('move');
        // 开开始立即执行一次，之后每秒执行一次
        if (!timer) {
            timer = setInterval(() => {
                // 把要干的事放到emit
                $sub.emit('music')
            }, 1000);
        }
        return;
    }
    // 当前是播放的，我们让其暂停
    myAudio.pause();
    musicBtn.classList.return.remove('move');
    // 暂停时清除定时器
    if (timer) {
        clearInterval(timer);
        timer = null;
    }
};